<template>
  <view class="container">
    <view class="form">
      <text class="title">登录</text>
      <input
        class="input"
        placeholder="请输入用户名"
        v-model="username"
        type="text"
      />
      <input
        class="input"
        placeholder="请输入密码"
        v-model="password"
        type="password"
      />
      <button class="btn" type="primary" @click="handleLogin()">登录</button>
      <!-- 跳转按钮（登录成功后显示） -->
      <button 
        class="jump-btn" 
        v-if="showJumpBtn" 
        @click="handleJump"
      >
        跳转至主页
      </button>
      <view class="link">
        <text>没有账号？</text>
        <navigator url="/pages/register/register">去注册</navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      showJumpBtn: false // 控制跳转按钮显示
    };
  },
  methods: {
    async handleLogin() { // 改为async函数，支持await调用云函数
      // 1. 保留原有输入校验逻辑
      if (!this.username || !this.password) {
        uni.showToast({
          title: '请输入完整信息',
          icon: 'none',
        });
        return;
      }

      try {
        // 2. 核心改造：调用uniCloud云函数checkUser，查询云端数据库（替换原有本地缓存读取）
        const res = await uniCloud.callFunction({
          name: 'checkUser', // 云函数名称（需已创建并部署到云端）
          data: { // 传入云函数的参数（用户名+密码）
            username: this.username.trim(), // 去除空格，避免无效查询
            password: this.password
          }
        });

        // 3. 处理云函数返回结果（根据状态码判断登录状态，与原有提示逻辑对齐）
        const { code, message, data: userId } = res.result;
        switch (code) {
          case 200:
            // 登录成功：保留原有逻辑（存储用户信息、提示、显示跳转按钮）
            console.log("登录验证成功（云端数据库）");
            
            // 存储当前登录用户信息（avatar默认空字符串，与原有逻辑一致）
            uni.setStorageSync('userInfo', {
              username: this.username,
              avatar: '' // 若数据库有avatar字段，可改为 await 查询用户详情获取
            });

            // 登录成功提示
            uni.showToast({
              title: '登录成功',
              icon: 'success'
            });

            // 显示跳转按钮
            this.showJumpBtn = true;
            break;

          case 300:
            // 用户名不存在（对应云函数返回状态）
            uni.showToast({
              title: '账号不存在',
              icon: 'none'
            });
            break;

          case 201:
            // 密码错误（对应云函数返回状态）
            uni.showToast({
              title: '账号或密码错误',
              icon: 'none'
            });
            break;

          case 400:
            // 参数无效（如用户名非字符串）
            uni.showToast({
              title: message || '输入信息无效',
              icon: 'none'
            });
            break;

          case 600:
            // 服务器数据异常（如用户名重复）
            uni.showToast({
              title: '服务器异常，请联系管理员',
              icon: 'none'
            });
            break;

          default:
            // 其他异常
            uni.showToast({
              title: '登录失败，请重试',
              icon: 'none'
            });
        }

      } catch (error) {
        // 捕获云函数调用异常（如网络错误、云函数未部署）
        console.error('登录调用云函数失败：', error);
        uni.showToast({
          title: '网络错误，无法连接服务器',
          icon: 'none'
        });
      }
    },

    // 4. 保留原有跳转逻辑，不修改
    handleJump() {
      // 方式1：如果新闻页是tabBar页面，用switchTab（需在pages.json的tabBar中配置）
      uni.switchTab({
        url: '/pages/CustomPage/CustomPage',
        fail: (err) => {
          console.error('switchTab跳转失败:', err);
          // 备用方式：如果不是tabBar页面，用navigateTo
          uni.navigateTo({
            url: '/pages/CustomPage/CustomPage',
            fail: (err2) => {
              console.error('navigateTo跳转失败:', err2);
              uni.showToast({
                title: '跳转失败，请检查页面路径',
                icon: 'none'
              });
            }
          });
        }
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.form {
  width: 80%;
  max-width: 300px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  display: block;
}

.input {
  width: 100%;
  height: 40px;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 0 10px;
  margin-bottom: 15px;
  box-sizing: border-box;
}

.btn {
  width: 100%;
  height: 40px;
  background-color: #007aff;
  color: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* 跳转按钮样式 */
.jump-btn {
  width: 100%;
  height: 40px;
  background-color: #34c759;
  color: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
}

.link {
  font-size: 14px;
  color: #666;
}

.link navigator {
  color: #007aff;
  text-decoration: none;
}
</style>